<template>
	<view class="" style="position: relative;">
		<swiper
			class="swiper"
			:indicator-dots="swiperDots"
			:autoplay="autoplay"
			:indicator-color="swiperColor"
			:circular="circular"
			:interval="interval"
			:duration="duration"
			:indicator-active-color="swiperActiveColor"
			@change="swiperChange"
		>
			<swiper-item style="width: 100%;height: 360rpx;">
				<view class="swiper-item">
					<view class="swiper-item-view" v-for="(item, index) in swiperList" :key="index" v-if="index < 10" @click="clickItem(item)">
						<image class="swiper-img" :src="baseUrl + item.img"></image>
						<text class="swiper-text">{{ item.name }}</text>
					</view>
				</view>
			</swiper-item>
			<block v-if="swiperList.length > 10">
				<swiper-item style="width: 100%;height: 360rpx;">
					<view class="swiper-item">
						<view class="swiper-item-view" v-for="(item, index) in swiperList" :key="index" v-if="index > 9 && index < 20" @click="clickItem(item)">
							<image class="swiper-img" :src="baseUrl + item.img"></image>
							<text class="swiper-text">{{ item.name }}</text>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="dots" v-if="customize == true && swiperDots == false">
			<block v-for="(item, index) in swiperList" :key="index" v-if="index < 2 && swiperList.length > 10">
				<view
					class="dot"
					:class="[index == swiperCurrent ? 'active' : '']"
					:style="[index == swiperCurrent ? { background: swiperActiveColor } : { background: swiperColor }]"
				></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cg-swiper',
	props: {
		// 面板指示点
		swiperDots: {
			type: Boolean,
			default: false
		},
		// 指示点颜色
		swiperColor: {
			type: String,
			default: '#cccccc'
		},
		// 选中指示点颜色
		swiperActiveColor: {
			type: String,
			default: '#f18b49'
		},
		// 是否自动切换
		autoplay: {
			type: Boolean,
			default: false
		},
		// 自动切换时长
		interval: {
			type: Number,
			default: 5000
		},
		// 滑动动画时长
		duration:{
			type: Number,
			default: 500
		},
		// 是否采用衔接滑动
		circular: {
			type: Boolean,
			default: false
		},
		// 滑动块视图容器
		swiperList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		// 是否开启自定义指示点
		customize: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			swiperCurrent: 0,
			baseUrl: 'https://gjc.hy-dzsc.cn/'
		};
	},
	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},

		clickItem(item) {
			this.$emit('clickItem', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;
	height: 360rpx;
}
.swiper-item {
	display: flex;
	flex-wrap: wrap;
}
.swiper-item-view {
	width: 20%;
	height: 160rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	.swiper-text{
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: $uni-text-color-placeholder;
	}
}
.swiper-img {
	width: 60rpx;
	height: 60rpx;
	padding: 8rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
	// border: 2rpx solid $uni-text-color;
}

/* 轮播圆点样式修改 */
.dots {
	left: 0;
	right: 0;
	bottom: 20rpx;
	display: flex;
	position: absolute;
	justify-content: center;
}
.dots .dot {
	margin: 0 5rpx;
	width: 40rpx;
	height: 6rpx;
	border-radius: 20%;
	transition: all 0.6s;
}
.dots .dot.active {
	width: 40rpx;
}
</style>
